<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    {include file="../tpl/header.html" /}
</head>
<body>
{include file="../tpl/menu.html" /}
<link rel="stylesheet" href="{$conf['static_url']}/admin/css/wangeditor.css?{$PUBCJ}">
<script type="text/javascript" src="{$conf['static_url']}/admin/js/wangeditor.js?{$PUBCJ}"></script>

<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form" method="post" action="{:url('admin/index/layeditnew')}">

            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <div id="toolbar-container"> <!-- 用于创建工具栏 --> </div>
                    <div id="editor-container" style="height: 700px;"> <!-- 用于创建编辑器 --> </div>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <span class="layui-btn-xs" onclick="handle_editor('get');">获取HTML</span>
                <span class="layui-btn-xs" onclick="handle_editor('set');">设置HTML</span>
            </div>

            <div class="layui-form-item layui-form-text">
                <label for="html" class="layui-form-label">HTML</label>
                <div class="layui-input-block">
                    <textarea id="html" name="html" placeholder="" class="layui-textarea"></textarea>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <button class="layui-btn" lay-filter="add" lay-submit="">增加</button>
            </div>
        </form>
    </div>
</div>

<script>
    var createEditor = window.wangEditor.createEditor; //创建编辑器
    var createToolbar = window.wangEditor.createToolbar; //创建工具栏
    // 编辑器配置
    var editorConfig = {
        placeholder:'请输入内容',
        MENU_CONF:{
            //上传图片相关配置
            uploadImage:{
                server:'{:url("admin/index/upload",["edit" => 2])}',
                fieldName: 'file',
                // 单个文件的最大体积限制，默认为 2M
                maxFileSize: 2 * 1024 * 1024, // 1M
                // 最多可上传几个文件，默认为 100
                maxNumberOfFiles: 10,
                // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                allowedFileTypes: ['image/*'],
                // 将 meta 拼接到 url 参数中，默认 false
                metaWithUrl: false,
                // 跨域是否传递 cookie ，默认为 false
                withCredentials: true,
                // 超时时间，默认为 10 秒
                timeout: 5 * 1000, // 5 秒
            },
            //上传视频
            uploadVideo:{
                server:'{:url("admin/index/upload",["edit" => 2])}',
                fieldName: 'file',
                // 单个文件的最大体积限制，默认为 2M
                maxFileSize: 10 * 1024 * 1024, // 1M
                // 最多可上传几个文件，默认为 100
                maxNumberOfFiles: 3,
                // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                allowedFileTypes: ['video/*'],
                // 将 meta 拼接到 url 参数中，默认 false
                metaWithUrl: false,
                // 跨域是否传递 cookie ，默认为 false
                withCredentials: true,
                // 超时时间，默认为 10 秒
                timeout: 30 * 1000, // 30 秒
            }
        }
    };

    /*
    editorConfig.onChange = (editor) => {
        // 当编辑器选区、内容变化时，即触发
        console.log('content', editor.children)
        console.log('html', editor.getHtml())
    }
    */
    // 工具栏配置
    var toolbarConfig = {};

    // 创建编辑器
    var editor = createEditor({
        selector: '#editor-container',
        config: editorConfig,
        mode: 'default' // 或 'simple' 参考下文
    });
    // 创建工具栏
    var toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'default' // 或 'simple' 参考下文
    });


    function handle_editor(t) {
        var jObj = $('#html');
        switch (t) {
            case 'set':
                editor.setHtml(jObj.val());
                break;
            case 'get':
                jObj.val(editor.getHtml());
                break;
        }
        return false;
    }

    //给默认值
    editor.setHtml('<p>这里是编辑时,读取后台接口传输的数据</p>');


    layui.use(['form', 'layer','layedit'],
        function() {
            $ = layui.jquery;
            var form = layui.form, layer = layui.layer,layedit = layui.layedit;
            //监听提交
            form.on('submit(add)', function(data) {
                //获取编辑器内容
                data.field['introduce'] = editor.getHtml();
                $.ajax({
                    type:'post',
                    data:data.field,
                    dataType:'json',
                    url:"{:url('admin/index/layeditnew')}",
                    success:function (e) {
                        if(e.code === 1){
                            layer.msg(e.msg, {icon: 6,time: layer_msg_success_time},
                                function() {
                                    var index = parent.layer.getFrameIndex(window.name);
                                    parent.layer.close(index);
                                    parent.location.reload();
                                });
                        }else{
                            layer.msg(e.msg, {icon: 5,time: layer_msg_error_time});
                        }
                    }
                });
                //发异步，把数据提交给php
                return false;
            });
        });
</script>
</body>
</html>